<template>
    <div class="login">
        <div class="center">
            <div class="form-box">
                <div class="title">管理员登录</div>
                <div class="form">
                    <el-form :model="form" ref="form" label-width="100px" class="myform" size="medium"
                             @submit.native.prevent="onSubmit('form')">
                        <el-form-item label="" prop="username" label-width="auto" size="medium"
                                      :rules="[{required:true,message:'请输入用户名',trigger:'blur'}]">
                            <el-input type="input" v-model="form.username" placeholder="用户名"
                                      size="medium"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="password" label-width="auto" size="medium"
                                      :rules="[{required:true,message:'请输入登录密码',trigger:'blur'}]">
                            <el-input type="password" v-model="form.password" placeholder="登录密码"
                                      size="medium"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="verify_code" label-width="auto" size="medium"
                                      style="display: flex;align-items: center;">
                            <el-input type="input" v-model="verify_code" placeholder="图片验证码"
                                      style="width: 180px;"
                                      size="medium"></el-input>
                            <img
                                v-if="viCodeImageUrl"
                                :src="viCodeImageUrl"
                                class="vi-code-image-register"
                                @click="refreshViCodeImage"
                            />
                        </el-form-item>
                        <el-form-item label="" prop="code" label-width="auto" size="medium">
                            <el-input style="width: 70%;" type="code" v-model="form.code" placeholder="短信验证码"
                                      size="medium"></el-input>
                            <span @click="getViCode"
                                  :style="{width:'120px',height: '30px', display: 'inline-block', textAlign: 'center', lineHeight: '30px', marginLeft: '10px', color: getViCodeButtonColor, cursor: getViCodeButtonCursor}">
                                {{ getViCodeButtonText }}
                            </span>
                        </el-form-item>
                        <el-form-item label-width="auto" size="medium">
                            <el-button type="primary" native-type="submit" round :loading="loading">登&nbsp;&nbsp;&nbsp;录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            form: {
                username: '',
                password: '',
                code: '',
            },
            viCodeImageUrl: '',
            verify_code: "",
            countdown: 0, // 倒计时秒数
            isCounting: false, // 是否正在倒计时
        }
    },
    computed: {
        getViCodeButtonText() {
            if (this.isCounting) {
                return `${this.countdown}s后重新获取`;
            } else {
                return '获取验证码';
            }
        },
        getViCodeButtonColor() {
            if (this.isCounting) {
                return '#ccc';
            } else {
                return '#4fa1d9';
            }
        },
        getViCodeButtonCursor() {
            if (this.isCounting) {
                return 'not-allowed';
            } else {
                return 'pointer';
            }
        },
    },
    created() {
    },
    mounted() {
        this.refreshViCodeImage()
    },
    methods: {
        getViCode() {
            const dataList = {
                tel: this.form.username,
                type: 0,
                verify_code: this.verify_code,
            }
            this.$http.post('admin/Public/getTdVerifyCode', dataList).then(result => {
                if (result.code == 200) {
                    this.$message.success(result.msg);
                    this.startCountdown(); // 开始倒计时
                } else {
                    this.refreshViCodeImage()
                    this.$message.error(result.msg);
                }
            });
        },
        startCountdown() {
            this.isCounting = true;
            this.countdown = 60;
            const intervalId = setInterval(() => {
                this.countdown--;
            }, 1000);
        },
        refreshViCodeImage() {
            const baseUrl = 'https://web.qingyutie.com/admin/public/getImgVerifyCode';
            // const baseUrl = 'http://175.178.253.101/admin/public/getImgVerifyCode';
            this.viCodeImageUrl = `${baseUrl}?t=${Date.now()}`;
            console.log(this.viCodeImageUrl)
        },
        onSubmit(form) {
            this.$refs[form].validate((valid) => {
                if (valid != false) {
                    this.$http.post('/admin/public/login', this.form).then(result => {
                        this.loading = false;
                        if (result.code == 200) {
                            localStorage.setItem('userInfo', JSON.stringify(result.data));
                            this.$store.commit('setUserInfo', result.data);
                            this.$router.push({
                                path: '/',
                                query: {refersh: window.location},
                            })
                            this.$message.success(result.msg)
                        } else {
                            this.refreshViCodeImage()
                            this.$message.error(result.msg);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
    },
    components: {}
}
</script>

<style lang="less" scoped>
.login {
    height: 100%;
    position: relative;
    background-image: url("../../assets/image/bg.jpg");
    background-size: cover;

    .center {
        width: 650px;
        height: 460px;
        background: #fff;
        box-shadow: 0px 0px 30px 0px rgba(217, 217, 217, 0.7);
        border-radius: 20px;
        position: absolute;
        left: calc((100% - 700px) / 2);
        top: calc((100% - 450px) / 2);

        .form-box {
            width: 330px;
            margin: 40px auto;

            .title {
                color: #222;
                font-size: 30px;
                font-weight: 600;
            }

            .form {
                margin-top: 20px;

                ::v-deep(.el-form) {
                    .el-form-item {
                        margin-bottom: 22px;
                    }

                    .el-button {
                        width: 100%;
                        height: 41px;
                        background: #4DB673;
                        font-size: 16px;
                        color: #fff;
                        margin-top: 15px;
                    }
                }
            }
        }
    }
}

.vi-code-image-register {
    margin-left: 20px;
    width: 120px; /* Adjust size */
    height: 40px; /* Adjust size */
}

/deep/ .el-form-item__content {
    display: flex !important;
    align-items: center !important;
}
</style>
